<style>
  .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
  .welcome .icon {margin-right:10px;color:#1aa094;}
  .welcome .icon-cray {color:#ffb800 !important;}
  .welcome .icon-blue {color:#1e9fff !important;}
  .welcome .icon-tip {color:#ff5722 !important;}
  .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
  .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
  .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
  .welcome .welcome-module {width:100%;height:210px;}
  .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
  .welcome .panel-body {padding:10px}
  .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
  .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
  .welcome .layui-red {color:red}
  .welcome .main_btn > p {height:40px;}
  .welcome .layui-bg-number {background-color:#F8F8F8;}
  .welcome .layuimini-notice:hover {background:#f6f6f6;}
  .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
  .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
  .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
  .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-blue">实时</span>
                                                        <h5>任务统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <a href="javascript:;" layuimini-content-href="page/crontab.html" data-title="计划任务">
                                                            <h1 class="no-margins" id="cron_total">0</h1>
                                                        </a>
                                                        <small>当前计划任务数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-cyan">实时</span>
                                                        <h5>站点统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <a href="javascript:;" layuimini-content-href="page/setting/sites.html" data-title="站点设置">
                                                            <h1 class="no-margins" id="sites_total">0</h1>
                                                        </a>
                                                        <small>已配置站点数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>下载器统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <a href="javascript:;" layuimini-content-href="page/setting/clients.html" data-title="下载器设置">
                                                            <h1 class="no-margins" id="clients_total">0</h1>
                                                        </a>
                                                        <small>已配置的下载器</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-green">实时</span>
                                                        <h5>支持站点</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="sites_count">0</h1>
                                                        <small>当前支持站点数</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/setting/sites.html" data-title="站点设置">
                                                <i class="fa fa-globe"></i>
                                                <cite>站点设置</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/setting/clients.html" data-title="下载器设置">
                                                <i class="fa fa-cloud-download"></i>
                                                <cite>下载器设置</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/setting/folder.html" data-title="目录设置">
                                                <i class="fa fa-folder"></i>
                                                <cite>目录设置</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/setting/filter.html" data-title="过滤器设置">
                                                <i class="fa fa-filter"></i>
                                                <cite>过滤器设置</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/crontab.html" data-title="计划任务">
                                                <i class="fa fa-calendar"></i>
                                                <cite>计划任务</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/status/syslog.html" data-title="系统日志">
                                                <i class="fa fa-microchip"></i>
                                                <cite>系统日志</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/setting/default.html" data-title="常规设置">
                                                <i class="fa fa-cog"></i>
                                                <cite>常规设置</cite>
                                            </a>
                                        </div>
                                        <div class="layui-col-xs3 layuimini-qiuck-module">
                                            <a href="javascript:;" layuimini-content-href="page/layer.html" data-title="弹出层">
                                                <i class="fa fa-shield"></i>
                                                <cite>弹出层</cite>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
                    <div class="layui-card-body layui-text">
                        <div class="layuimini-notice">
                            <div class="layuimini-notice-title">IYUU Plus 简单上手使用教程</div>
                            <div class="layuimini-notice-extra">2021年3月24日11:00:00</div>
                            <div class="layuimini-notice-content layui-hide">
                                第一步：站点设置 -> 新增站点；<br>
                                第二步：下载器设置 -> 新增下载器；<br>
                                第三步：计划任务 -> 新增计划任务；<br>
                                新增任务之后，可以点击运行按钮，立刻开始任务；点日志按钮查看运行日志。<br>
                                截止目前，已做好的功能有：全自动辅种、全自动转移做种客户端、全自动RSS下载（支持容量筛选、正则表达式匹配和关键字匹配）。
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
                    <div class="layui-card-body layui-text">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>项目名称</td>
                                <td id="project">
                                  IYUUPlus
                                </td>
                            </tr>
                            <tr>
                                <td>当前版本</td>
                                <td id="version">v2.0.0</td>
                            </tr>
                            <tr>
                              <td>最后更新</td>
                              <td><a href="https://github.com/ledccn/IYUUPlus/commits/master" target="_blank" id="updated_at"></a></td>
                            </tr>
                            <tr>
                              <td>系统环境</td>
                              <td id="system_info"></td>
                            </tr>
                            <tr>
                              <td>PHP版本</td>
                              <td id="PHP_VERSION"></td>
                            </tr>
                            <tr>
                              <td>PHP路径</td>
                              <td id="PHP_BINARY"></td>
                            </tr>
                            <tr>
                              <td>运行时</td>
                              <td id="RUNTIME_PATH"></td>
                            </tr>
                            <tr>
                                <td>系统磁盘</td>
                                <td id="disk_total"></td>
                            </tr>
                            <tr>
                                <td>主要特色</td>
                                <td>零门槛 / 响应式 / 清爽 / 极简</td>
                            </tr>
                            <tr>
                                <td>接口文档</td>
                                <td>
                                    <a href="http://api.iyuu.cn/docs.php" target="_blank">接口文档</a>
                                </td>
                            </tr>
                            <tr>
                                <td>下载地址</td>
                                <td>
                                    Docker：<a href="https://hub.docker.com/r/iyuucn/iyuuplus" target="_blank">IYUUPlus</a><br>
                                    gitee：<a href="https://gitee.com/ledc/iyuuplus" target="_blank">IYUUPlus</a> | <a href="https://gitee.com/ledc/IYUUAutoReseed" target="_blank">IYUUAutoReseed</a><br>
                                    github：<a href="https://github.com/ledccn/IYUUPlus" target="_blank">IYUUPlus</a> | <a href="https://github.com/ledccn/IYUUAutoReseed" target="_blank">IYUUAutoReseed</a>
                                </td>
                            </tr>
                            <tr>
                                <td>Gitee</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                      <a href="https://gitee.com/ledc/iyuuplus" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/ledc/iyuuplus/badge/star.svg?theme=dark" alt="star"></a>
                                      <a href="https://gitee.com/ledc/iyuuplus" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/ledc/iyuuplus/badge/fork.svg?theme=dark" alt="fork"></a>
                                      <a href="https://gitee.com/ledc/IYUUAutoReseed" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/ledc/IYUUAutoReseed/badge/star.svg?theme=dark" alt="star"></a>
                                      <a href="https://gitee.com/ledc/IYUUAutoReseed" target="_blank"><img src="https://gitee.com/ledc/IYUUAutoReseed/badge/fork.svg?theme=dark" alt="fork"></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Github</td>
                                <td style="padding-bottom: 0;">
                                    <div class="layui-btn-container">
                                      <iframe src="https://ghbtns.com/github-btn.html?user=ledccn&repo=IYUUPlus&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                      <iframe src="https://ghbtns.com/github-btn.html?user=ledccn&repo=IYUUPlus&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                      <iframe src="https://ghbtns.com/github-btn.html?user=ledccn&repo=IYUUAutoReseed&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                      <iframe src="https://ghbtns.com/github-btn.html?user=ledccn&repo=IYUUAutoReseed&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
                    <div class="layui-card-body layui-text layadmin-text">
                        <p>本模板基于layui2.5.4以及font-awesome-4.7.0进行实现。</p>
                        <p> + IYUU交流QQ群：859882209, 931954050, 924099912, 41477250（加群时请备注来源如gitee、github、博客、贴吧等）</p>
                        <p> + 影视信息生成：<a target="_blank" href="https://api.iyuu.cn/ptgen/" >PT Gen</a></p>
                        <p> + TOP1000：<a target="_blank" title="右键另存为，保存到本地" href="https://api.iyuu.cn/top1000.txt" >TOP1000</a></p>
                        <p> + 爱语飞飞：<a target="_blank" href="https://iyuu.cn">爱语飞飞</a></p>
                        <p> + 大卫博客：<a target="_blank" href="https://www.iyuu.cn" >大卫博客</a></p>
                        <p> + webman开发文档：<a target="_blank" href="https://www.workerman.net/doc/webman#/">webman</a></p>
                        <p> + Layui开发文档：<a target="_blank" href="http://layui.iyuu.cn">Layui</a></p>
                        <p> + LayuiMini开发文档：<a target="_blank" href="http://layuimini.99php.cn/docs/index.html">LayuiMini</a></p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script id="notice_tpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
  <div class="layuimini-notice" data-id="{{ item.id }}">
    <div class="layuimini-notice-title">{{ item.title }}</div>
    <div class="layuimini-notice-extra">{{ item.created_at }}</div>
    <div class="layuimini-notice-content layui-hide">{{ item.content }}</div>
  </div>
  {{#  }); }}
</script>
<script>
layui.use(['layer','echarts','element'], function () {
  let $ = layui.jquery,
      layer = layui.layer,
      echarts = layui.echarts,
      element = layui.element;

  //init页面信息
  $.getJSON('/Status/welcome', function (d) {
    if (d.ret === 200) {
      let elem = null;
      for (let key in d.data) {
        elem = document.getElementById(key);
        if (elem) {
            elem.innerHTML = d.data[key];
        }
      }
      return;
    }
    layer.msg('接口请求失败/Status/welcome', function () {
    });
  });

  /**
   * 查看公告信息
   */
  $('body').on('click', '.layuimini-notice', function () {
    let title = $(this).children('.layuimini-notice-title').text(),
        noticeTime = $(this).children('.layuimini-notice-extra').text(),
        content = $(this).children('.layuimini-notice-content').html();
    let html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
        '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
        '<div style="font-size: 12px">' + content + '</div>\n' +
        '</div>\n';
    parent.layer.open({
      type: 1,
      title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
      area: '300px;',
      shade: 0.8,
      id: 'layuimini-notice',
      btn: ['查看', '取消'],
      btnAlign: 'c',
      moveType: 1,
      content: html,
      success: function (layero) {
        let btn = layero.find('.layui-layer-btn');
        btn.find('.layui-layer-btn0').attr({
          href: 'https://github.com/ledccn/IYUUPlus',
          target: '_blank'
        });
      }
    });
  });

  /**
    * 报表功能
    */
  let echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
  let optionRecords = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '邮件营销',
        type: 'line',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'line',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '视频广告',
        type: 'line',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '直接访问',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '搜索引擎',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  echartsRecords.setOption(optionRecords);

  // echarts 窗口缩放自适应
  window.onresize = function () {
    echartsRecords.resize();
  }
});
</script>
